<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js上传文件到服务器整体流程</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-1.11.0.min.js"></script>
</head>

<body>
    <input type="file" id="upload"> <button type="submit" id="sub">上传文件</button>
    <br />
    <!-- bs进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="jdt">
            0%
        </div>
    </div>
    <img src="" alt="" id="img" width="200">
    <script>
        var sub = document.querySelector('#sub')
        sub.addEventListener('click', function () {
            // files为file选择文件的属性 它是一个数组
            var files = document.querySelector('#upload').files
            if (files.length <= 0) return alert('请选择要上传的文件')
            // FormData用来存储待上传的文件
            var fd = new FormData()
            fd.append('avatar', files[0])
            // 发起ajax请求
            var xhr = new XMLHttpRequest()

            //监听 xhr upload的onprogress事件
            xhr.upload.onprogress = function (e) {
                //  e.lengthComputable 是一个布尔值 表示当前上传的资源是否具有可计算的长度
                if (e.lengthComputable) {
                    // e.loaded:已传输的字节
                    // e.total:需要传输的字节(总字节)
                    var percentComplate = Math.ceil((e.loaded / e.total) * 100)
                    console.log(percentComplate);//计算出上传 百分比
                    // 动态设置进度条
                    $('#jdt').attr('style', 'width:' + percentComplate + '%').html(percentComplate + '%')
                }
            }
            xhr.upload.onload = function () {
                $('#jdt').removeClass().addClass('progress-bar progress-bar-success')
            }

           
            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
            // 将FormData里的数据(文件)上传到服务器
            xhr.send(fd)
            // 监听服务器响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 响应会的数据解析为对象 (便于 操作和 显示)
                    var data = JSON.parse(xhr.responseText)

                    if (data.status === 200) {
                        //    上传成功
                        document.querySelector('#img').src = ' http://www.liulongbin.top:3006' + data.url// 完整的src路径 一般为 接口的根路径 + 具体图片的url地址 拼接而成
                    } else {
                        console.log('上传图片失败' + data.message);
                    }
                }
            }

        })
























        // var sub = document.querySelector('#sub')
        // sub.addEventListener('click', function () {
        //     var files = document.querySelector('#upload').files
        //     if (files.length <= 0) return alert('请选择要上传的文件')
        //     var fd = new FormData()
        //     fd.append('avatar', files[0])
        //     var xhr = new XMLHttpRequest()
        //     xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
        //     xhr.send(fd)
        //     xhr.onreadystatechange = function () {
        //         if (xhr.readyState === 4 && xhr.status === 200) {
        //             var data = JSON.parse(xhr.responseText)
        //             if (data.status === 200) {
        //                 document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
        //             } else {
        //                 console.log('上传图片失败' + data.message);
        //             }
        //         }

        //     }
        // })


    </script>
</body>

</html>